<template>
    <div class="primaryCardAddOn" v-loading="isLoading">
        <cardComponent pageTitle="申请处理类-->主卡附属卡查询">
            <template slot="cardBody">
                <div class="dialogVisible" v-show="showFlag">
                    <el-table
                        class="heard-bg business_table"
                        :data="tableData"
                        width="100%"
                        border
                        stripe
                        highlight-current-row
                        @row-click="handleSelectRow"
                    >
                        <el-table-column label=" " width="50">
                            <template slot-scope="scope">
                                <span @click.prevent.stop="handleChange(scope.row)">
                                    <el-radio v-model="currentSelectRow" :label="scope.row.CARDNBR"></el-radio>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="附卡卡号">
                            <template slot-scope="scope">
                                <span
                                    class="text_a"
                                    @click="handleViewDetail(scope.row.CARDNBR)"
                                >{{ scope.row.CARDNBR }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发卡日期" prop="OPENDATE"></el-table-column>
                        <el-table-column label="证件号码" prop="CUSTRNBR"></el-table-column>
                        <el-table-column label="凸字姓名" prop="EMBNAME"></el-table-column>
                        <el-table-column label="有效期(年-月)" prop="EXPIRE">
                            <template slot-scope="scope">
                                <span>{{ scope.row.EXPIRE | getDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="卡片产品" prop="PRODDESC"></el-table-column>
                        <el-table-column label="卡片状态" prop="CANCLCODE">
                            <template slot-scope="scope">
                                <span>{{ scope.row.CANCLCODE | getText(DataDictionary) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="附卡额度" prop="LMTOPT">
                            <template slot-scope="scoped">{{ scoped.row | getCRDLIMIT(tableSeting)}}</template>
                        </el-table-column>
                    </el-table>
                    <div class="btnBox">
                        <el-button type="primary" size="small" plain @click="cardAddme">主卡设置附卡额度</el-button>
                        <!-- <el-button type="primary" size="small" @click="stopPayment">止付</el-button>
                        <el-button type="primary" size="small" @click="openPayment">解止付</el-button>-->
                        <!-- <el-button size="small" type="primary" plain @click="changeCard">换卡</el-button> -->
                    </div>
                </div>

                <div v-show="!showFlag">
                    <div class="cardDataEnquiryMain">
                        <el-row>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">卡号:</span>
                                    {{cardData.CARDNO}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">网申卡标识:</span>
                                    {{cardData.ISSMOD | issModeFlag}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">证件号码:</span>
                                    {{cardData.CUSTID}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">卡介质:</span>
                                    {{VCNSTS_FILTER|cardType}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">持卡人姓名:</span>
                                    {{cardData.NAME}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">卡片产品:</span>
                                    {{cardData.PRODDESC}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row></el-row>
                        <el-row>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">人民币信用额度:</span>
                                    {{cardData.CRDLIMT}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">人民币可用额度:</span>
                                    {{cardData.AVLIMT}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">首次激活日期:</span>
                                    {{cardData.ACTIVEFST | filterTimeDate}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">年费类型:</span>
                                    {{cardData.FEECODE|feecode(FEECODELIST)}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">美元信用额度:</span>
                                    {{cardData.XCREDLIMIT}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">美元可用额度:</span>
                                    {{cardData.XAVLIMT}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">最近激活日期:</span>
                                    {{cardData.ACTIVDAY | filterTimeDate}}
                                </div>

                                <div class="colItem">
                                    <span class="queryMainLeft">下次年费收取(年-月):</span>
                                    {{cardData.FEEMONTH}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">预借现金信用额度:</span>
                                    {{cardData.CASHCREDIT}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">预借现金可用额度:</span>
                                    {{cardData.CASHAVBILE}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">上次续卡日期:</span>
                                    {{cardData.PEXDATE}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">:</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row></el-row>
                        <el-row>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">是否设置交易密码:</span>
                                    {{cardData.PINSET===1?'是':'否'}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">当日密码错误次数:</span>
                                    {{cardData.PINFAILD}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">累计密码错误次数:</span>
                                    {{cardData.PINFAILT}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row></el-row>
                        <el-row>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">附卡额度设置方式:</span>
                                    {{cardData.LMTOPT|getLmttype(LmttypeList)}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">附卡限额:</span>
                                    {{cardData.AVLCRDLMT}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">附卡使用限额设置方式:</span>
                                    {{cardData.VFCRLMTSET|getVFCRLMTSET(CRLmttypeList)}}
                                </div>
                                <div class="colItem">
                                    <span class="queryMainLeft">附卡可用限额:</span>
                                    {{cardData.AVLCRDLMT}}
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="colItem">
                                    <span class="queryMainLeft">小额免密免签状态:</span>
                                    {{cardFlowData.UNQPASS | unqpass}}
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="btnBox">
                        <el-button type="primary" size="small" @click="goBack">返回</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import { reolaceString, getDictSelectList, getDictMappingValue } from '@/utils/Common';
import { BILLINGMETHOD } from '@/utils/Contants';
// import { getBaseDataList } from '@/utils/Common'
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { PAPERS_TYPE } from '@/utils/Contants';

export default {
    name: 'primaryCardAddOn',
    components: {
        cardComponent,
    },
    data() {
        return {
            cardData: [],
            cardFlowData: {},
            // 表格数据
            tableData: [],
            tableSeting: [],
            // 是否是主卡
            CARDHOLDER: '',
            // 数据字典
            DataDictionary: [],
            // 当前选择数据
            currentSelect: [],
            isLoading: false,
            FLAG: '', // 止付标志
            currentSelectRow: '', //
            showFlag: true,



            PINCHK_FILTER: '', // 消费是否使用密码
            PBFLAG_FILTER: '', // 个人卡标识
            MAFLAG_FILTER: '', // 主附卡标识
            VCNSTS_FILTER: '', // 虚拟卡状态
            FEECODELIST: [], // 年费代码
            PINSTS_FILTER: '', // 卡锁定状态

            cardList: [],//当前账户下主卡列表
            flag: '',
            LmttypeList: [],//额度设置方式
            CRLmttypeList: [],//限额设置方式
        };
    },
    filters: {
        // 日期转换
        getDate(time) {
            time += '';
            if (time.trim()) {
                const Date = moment(time, 'YYMM').format('YY-MM');
                return Date;
            }
        },
        // 卡片状态
        getText(text, list) {
            let txt = '';
            text = (`${text}`).trim();
            if (text === '') {
                txt = '正常';
            } else {
                list.forEach((item) => {
                    if (item.code === text) {
                        txt = item.label;
                    }
                });
            }

            return txt;
        },
        feecode(val, FEECODELIST) {
            let txt = '';
            val = (`${val}`).trim();
            if (val != '') {
                FEECODELIST.forEach((item) => {
                    if (item.code === val.trim()) {
                        txt = item.label;
                    }
                });
            }

            return txt;
        },
        // 额度
        getCRDLIMIT(row, cardList) {
            let CRDLIMIT;
            if (row.LMTOPT === 1) {
                CRDLIMIT = `${row.CRPER}%`;
            } else if (row.LMTOPT === 0) {
                cardList.forEach((item) => {
                    if (item.CARDHOLDER === 1) { // 主卡和附属卡额度一样时，取主卡额度
                        CRDLIMIT = item.CRDLIMIT.toFixed(2);
                    }
                });
            } else {
                CRDLIMIT = row.CRDLIMIT.toFixed(2);
            }
            return CRDLIMIT;
        },

        filterKetype: (value) => {
            value = (`${value}`).trim();
            for (let index = 0; index < PAPERS_TYPE.length; index++) {
                const element = PAPERS_TYPE[index];
                if (element.value === value) {
                    return element.name;
                }
            }
        },
        issModeFlag: (value) => {
            if (value == '01') {
                return '是';
            } else {
                return '否';
            }
        },
        cardType: (value) => {
            if (value == 'A') {
                return '虚拟卡';
            } else if (value == 'B') {
                return '虚实同发卡';
            } else {
                return '实体卡';
            }
        },
        filterTimeDate: (value) => {
            value = (`${value}`).trim();
            if (value === '0' || value === '00000000' || value === '') {
                return value;
            } if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
        },
        unqpass: (value) => {
            if (value == '0') {
                return "未设置";
            } else if (value == '1') {
                return "关闭";
            } else if (value == '2') {
                return "开通";
            }
        },
        getLmttype(val, list) {
            let txt = '';
            val = (`${val}`).trim();
            if (val != '') {
                list.forEach((item) => {
                    if (item.code === val.trim()) {
                        txt = item.label;
                    }
                });
            }
            return txt;
        },
        getVFCRLMTSET(val, list) {
            let txt = '';
            val = (`${val}`).trim();
            if (val != '') {
                list.forEach((item) => {
                    if (item.code === val.trim()) {
                        txt = item.label;
                    }
                });
            }
            return txt;
        },
    },
    created() {
        this.getBaseData({ dictValue: 'CLOCD' }, 'DataDictionary');
    },
    async mounted() {
        this.isLoading = true;
        //this.getDataInfo();
        await this.dictionaries();
    },
    computed: {
        ...mapState({
            cardInfo_3004: state => state.common.cardInfo_3004,
            defaultParams: state => state.common.defaultParams,
            defaultpinFlag: state => state.common.pinFlag,
            cardList_3601: state => state.common.cardList_3601, //卡列表
        }),
    },
    async activated() {
        // this.dictionaries();

        await this.reload();
    },
    methods: {

        async dictionaries() {
            this.LmttypeList = await getDictSelectList('LMTOPT', this);
            this.CRLmttypeList = await getDictSelectList('VFCRLMTSET', this);
            //this.cardStatus = await getDictSelectList('CLOCD', this);
            this.PINCHK_FILTER = await getDictMappingValue('yesOrNo', this.cardData.PINCHK, this);
            this.PBFLAG_FILTER = await getDictMappingValue('PBFLAG', this.cardData.PBFLAG, this);
            this.MAFLAG_FILTER = await getDictMappingValue('MAFLAG', this.cardData.MAFLAG, this);
            this.VCNSTS_FILTER = await getDictMappingValue('VCNSTS', this.cardData.VCNSTS, this);
            this.FEECODE_FILTER = await getDictMappingValue('FEECODE', this.cardData.FEECODE, this);
            this.PINSTS_FILTER = await getDictMappingValue('PINSTS', this.cardData.PINSTS, this);
            this.FEECODELIST = await getDictSelectList('FEECODE', this);

            this.cardList_3601.forEach((item) => {
                console.log("item.CATEGORY:" + item.CATEGORY + ",item.MAFLAG:" + item.MAFLAG + ",dfc:" + this.cardInfo_3004.CATEGORY);
                if (item.CATEGORY === this.cardInfo_3004.CATEGORY && item.MAFLAG === '1') {
                    console.log("item", item);
                    this.cardList.push(item);
                }
            });
            console.log("this.cardList", this.cardList);

            await this.getAllCardData();
            this.isLoading = false;
        },
        async reload() {
            this.isLoading = true;
            await this.getAllCardData();
            this.isLoading = false;
        },
        handleViewDetail(val) {
            this.showFlag = false;
            // 这里要传入银行号
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3004';
            defaultParams.body.appBody = {
                PINFLAG: '0',
                PIN: '',
                CARDNBR: val,
                CARDNO: val,
            };

            this.$post.common.transPort(defaultParams).then(
                (res) => {
                    const cardData = JSON.parse(res.data.jsonRes);
                    if (res.status === 200) {
                        if (cardData.sysHead.rspCd == '000000') {
                            this.cardData = cardData.body.appBody;
                            console.log("附卡信息：", this.cardData);
                        } else {

                        }
                    }
                },
                (err) => {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                },
            );
            const appBody4058 = {
                CARDNO: val || '', // 卡号
                PINFLAG: '0', // 是否检查密码标志
                OPTION: '0', // 修改选项   0为查询  1为修改
                SERTYPE: '', // 服务类型  查询时无作用
            };

            const defaultParams4058 = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams4058.body.appHead.tranCode = '4058';
            defaultParams4058.body.appBody = appBody4058;

            this.$post.common.transPort(defaultParams4058).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.cardFlowData = result.body.appBody;

                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });

        },

        // 点击返回
        goBack() {
            this.showFlag = true;
        },

        getAllCardData() {
            this.tableData = [];
            this.cardList.forEach(async (item) => {
                await this.getDataInfo(item.CARDNBR);
            });

        },
        // 进入页面获取附卡信息
        async getDataInfo(CARD) {

            const appBody = {
                CARDNBR: CARD, // 卡号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3070';
            defaultParams.body.appBody = appBody;
            // 3070交易
            await this.$post.common.transPort(defaultParams).then((res) => {

                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    // console.log(result,'主卡设置附属卡')
                    if (result.sysHead.rspCd === '000000') {
                        this.tableSeting = result.body.appBody.dataList;
                        //this.tableData = result.body.appBody.dataList;
                        const newTableData = this.tableSeting.filter(item => item.CARDHOLDER !== 1);
                        // this.tableData = [...newTableData];
                        this.tableData = [...this.tableData, ...newTableData];
                        console.log("this.tableData", this.tableData);
                    }
                }
            });
        },
        // 获取数据字典数据
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                // console.log(res, 'res-数据字典查询结果')
                this[target] = res.data.content;
            });
        },
        handleChange(row) {
            // console.log(row)
            this.handleSelectRow(row);
            // this.currentSelect = row
        },
        // 选择表格行
        handleSelectRow(row) {
            // console.log(row, '第' + row.CARDNBR + '行数据')
            // console.log(this.currentSelectRow,'currentSelectRow')
            // console.log(row.CARDNBR,'CARDNBR')
            if (row.CARDNBR === this.currentSelectRow) {
                this.currentSelectRow = '';
                this.currentSelect = '';
            } else {
                this.currentSelectRow = row.CARDNBR;
                this.currentSelect = row;
            }
        },
        // 主卡设置附卡额度
        cardAddme() {
            if (this.currentSelect.length === 0) {
                this.$alert(
                    '请选择附卡',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            } else {
                const cardNo = this.currentSelect.CARDNBR.trim();
                this.$router.push({ name: 'setAdditionalCard', path: '/operationDeals/childItem/setAdditionalCard', params: { cardNo } });
            }
        },
        // 止付
        stopPayment() {
            if (this.currentSelect.length === 0) {
                this.$alert(
                    '请选择附卡',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            } else {
                this.FLAG = 1;
                this.stopOpenPayment();
            }
        },
        // 解止付
        openPayment() {
            if (this.currentSelect.length === 0) {
                this.$alert(
                    '请选择附卡',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            } else {
                this.FLAG = 2;
                this.stopOpenPayment();
            }
        },

        // 换卡
        changeCard() {
            if (this.currentSelect.length === 0) {
                this.$alert(
                    '请选择附卡',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            } else {
                const cardNo = this.currentSelect.CARDNBR.trim();
                this.$router.push({ name: 'ChangeCard', path: '/operationDeals/ChangeCard', params: { cardNo } });
            }
        },

        // 4029交易，止付或者解止付
        stopOpenPayment() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                CHECKFLG: '100000000000000', // 检查项目选择
                IDTYPE: this.cardInfo_3004.KEYTYPE, // 证件种类
                CUSTID: this.cardInfo_3004.CUSTID, // 证件号码
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志 0-不检查
                FLAG: this.FLAG, // 止付标志 1：止付 2：解止付
                CARDNBR2: this.currentSelect.CARDNBR.trim(), // 附属卡卡号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4029';
            defaultParams.body.appBody = appBody;
            // 4029交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    // console.log(result,'止付')
                    if (result.sysHead.rspCd === '000000') {
                        if (this.FLAG === 1) {
                            this.$alert(
                                '止付成功', '提示',
                                {
                                    center: true,
                                    customClass: 'success', type: 'success',
                                },
                            );
                        } else {
                            this.$alert(
                                '解止付成功', '提示',
                                {
                                    center: true,
                                    customClass: 'success ',
                                },
                            );
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
    },
};
</script>

<style lang='scss'>
.primaryCardAddOn {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    .el-table {
        .el-radio {
            .el-radio__label {
                display: none;
            }
        }
    }

    .dialogVisible {
        .el-form-item__content {
            text-align: left;
        }
    }
    .btnBox {
        text-align: center;
        margin: 30px auto 0;
    }
}
</style>
